<template>
  <div>
   settlement
    <van-row type="flex" align="center" style="margin-top: 10px">
      <van-col span="2">
        <van-icon
          name="arrow-left"
          size="40"
          color="rgb(64, 150, 236)"
          @click="back"
        />
      </van-col>
      <van-col span="20"><span>
        <router-link :to="{name:'alipay'}"> 结算</router-link>
        </span></van-col>
    </van-row>
    <hr style="margin-top:20px,color:rgba(137, 162, 162, 0.1)" />
    <div class="box1">
      <van-row type="flex" align="center">
        <van-col span="18"> 你还没有收货地址哦，快去添加吧 </van-col>
        <van-col>
          <van-icon
            name="arrow"
            size="40"
            color="rgb(64, 150, 236)"
            @click="back"
          />
        </van-col>
      </van-row>
      <hr />
      <van-card
        num="2"
        tag="标签"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        origin-price="10.00"
      >
        <template #tags>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </template>
      </van-card>
      <hr />

      <van-cell-group>
        <van-field
          v-model="value"
          label="留言:"
          placeholder="选填不超过100字"
        />
      </van-cell-group>

      <hr />
      <van-cell-group>
        <van-cell is-link>
          <!-- default自定义value -->
          <template #default>
            <span class="yhvalue">优惠5.00元</span>
          </template>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="youhui">优惠券</span>
          </template>
        </van-cell>
        <hr />
        <van-cell value="￥8:00">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="yunfei">运费</span>
          </template>
        </van-cell>
        <hr />
        <van-cell class="custom-title" title="款项支付" value="" />
        <hr />
        <van-cell-group class="spje">
          <van-cell title="商品金额" value="￥29.8" />
          <van-cell title="优惠券抵扣" value="-￥5.00" />
          <p class="zong">总计:<span class="zongji"> ￥24.8</span></p>
        </van-cell-group>
      </van-cell-group>
      <van-submit-bar :price="2480" button-text="立即支付" @submit="onSubmit">
</van-submit-bar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style>
.box1 {
  border: 1 solid rgb(184, 182, 182) !important;
}
.van-cell--clickable {
  margin-left: -60px;
  width: 430px;
}
.yunfei {
  margin-left: -140px;
}
.yhvalue {
  float: right;
}
.custom-title {
  margin-left: -60px;
}
.youhui {
  margin-right: 30px;
}
.van-cell {
  height: 30px;
}
.van-cell__value {
  height: 30px;
}
.zongji {
  float: right;

  color: rgb(226, 119, 119);
}
.zong {
  float: right;
  margin-right: 20px;
  margin-top: 10px;
}
.spje {
  margin-left: -70px;
}
</style>